<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
    <div class="nav">五子棋</div>
    <div class="login-container">
      <!-- 登录对话框 -->
      <div class="login-dialog">
         <h3>用户登录</h3>

         <div class="row">
            <span>用户名</span>
            <input type="text" id="username">
         </div>

         <div class="row">
            <span>密码</span>
            <input type="password" id="password">
         </div>
         
         <div class="row">
            <button class="submit" onclick="login()">提交</button>
         </div>

      </div>

    </div>

    <script src="js/jquery.min.js"></script>
    <script>
      function login() {
         $.ajax({
            type: 'post',
            url: '/user/login',
            data: {
               username: $("#username").val(),
               password: $("#password").val()
            }
            ,success: function(result) {
               if(result.username != null) {
                  location.replace("/hall.html");
               }else{
                  alert("登录失败");
               }
            }
            ,error: function() {
               alert("请求发送失败");
            }
         });
      }
    </script>
</body>
</html>